let edits = document.querySelectorAll(".icon-edit");
let dels = document.querySelectorAll(".icon-delete");
let textareas = document.querySelectorAll("textarea");
let mains = document.querySelectorAll(".main");
let contents = document.querySelectorAll(".main-content");
let add = document.querySelector(".btn");
let con = document.querySelector(".container");
let items = document.querySelectorAll(".item");

add.addEventListener("click", () => {
  createItem();
});

// 初始化
let noteArrJson = localStorage.getItem("noteArr");

if (noteArrJson) {
  let firstArr = noteArrJson.split(",");
  let len = firstArr.length;
  for (let i = 0; i < len; i++) createItem();
  updateVar();
  contents.forEach((content, idx) => {
    content.textContent = firstArr[idx];
    textareas[idx].style.display = "none";
  });
}

function updateVar() {
  items = document.querySelectorAll(".item");
  contents = document.querySelectorAll(".main-content");
  mains = document.querySelectorAll(".main");
  textareas = document.querySelectorAll("textarea");
  dels = document.querySelectorAll(".icon-delete");
  edits = document.querySelectorAll(".icon-edit");
}

function createItem() {
  let newItem = document.createElement("div");
  let newTop = document.createElement("div");
  let newMain = document.createElement("div");
  let newMainContent = document.createElement("span");
  let newEdit = document.createElement("span");
  let newDel = document.createElement("span");
  let newTextarea = document.createElement("textarea");
  newItem.classList.add("item");
  newTop.classList.add("top");
  newMain.classList.add("main");
  newMainContent.classList.add("main-content");
  newEdit.classList.add("iconfont", "icon-edit", "icon");
  newEdit.style.fontSize = "24px";
  newDel.classList.add("iconfont", "icon-delete", "icon");
  newDel.style.fontSize = "28px";
  newDel.style.marginTop = "5px";
  newTop.appendChild(newEdit);
  newTop.appendChild(newDel);
  newMain.appendChild(newMainContent);
  newMain.appendChild(newTextarea);
  newItem.appendChild(newTop);
  newItem.appendChild(newMain);
  newEdit.addEventListener("click", () => {
    let flag = newTextarea.style.display === "none";
    console.log(newTextarea.value);
    console.log(flag);
    closeAllEdit();
    if (flag) {
      newTextarea.style.display = "block";
      newTextarea.value = newMainContent.textContent;
      newMainContent.style.display = "none";
    }
  });
  newDel.addEventListener("click", () => {
    con.removeChild(newItem);
    updateVar();
  });
  newTextarea.addEventListener("blur", () => {
    closeAllEdit();
    // 存储
    console.log("blur");
    let noteArr = [];
    contents.forEach((content) => {
      noteArr.push(content.textContent);
    });
    localStorage.setItem("noteArr", noteArr);
  });
  newTextarea.addEventListener("input", () => {
    newMainContent.textContent = newTextarea.value;
    let noteArr = [];
    contents.forEach((content) => {
      noteArr.push(content.textContent);
    });
    localStorage.setItem("noteArr", noteArr);
  });
  con.appendChild(newItem);
}

function closeAllEdit() {
  updateVar();
  edits.forEach((edit, idx) => {
    if (textareas[idx].style.display !== "none") {
      let content = textareas[idx].value;
      contents[idx].textContent = content;
      contents[idx].style.display = "-webkit-box";
      textareas[idx].value = "";
    }
    textareas[idx].style.display = "none";
  });
}
